import ChartBase from "./chart-base";
import {
  grid,
  legend,
  gridConfig,
  legendConfig,
  pieSeriesLabel,
  pieSeriesLabelLine,
  pieSeriesLabelConfig,
  pieSeriesLabelLineConfig,
  tooltip,
  tooltipConfig,
} from "./common";
import { deepClone, mergeObject } from "@/utils";

export default class Sunburst extends ChartBase {
  constructor() {
    super();
  }

  // 基础描述
  _info = {
    name: "旭日图",
    type: "sunburst", // 图表类型

    group: "sunburst", // 图表分类
    component: "e-chart",
    icon: "sunburst", // 图表展示ICON
  };

  // 总 配置项
  _defaultOption = {
    dataset: {
      source: [],
      dimensions: [],
    },
    grid,
    legend: {
      show: true,
      top: "5%",
    },
    tooltip,
    // visualMap: {
    //   type: "piecewise",
    //   left: "right",
    //   top: "center",
    //   calculable: true,
    //   realtime: false,
    //   splitNumber: 5,
    //   inRange: {
    //     color: ["#fee99d", "#e34a33"],
    //   },
    //   formatter: (val) => {
    //     console.log(val);
    //   },
    // },
    series: [],
  };
  // 系列
  _defaultSeries = {
    radius: ["15%", "80%"],
    center: ["50%", "55%"],
    type: "sunburst",
    sort: undefined,
    emphasis: {
      focus: "ancestor",
    },
    data: [
      {
        value: 8,
        children: [
          {
            value: 6,
            children: [
              {
                value: 2,
              },
              {
                value: 2,
              },
              {
                value: 1,
              },
              {
                value: 0.5,
              },
            ],
          },
          {
            value: 2,
          },
        ],
      },
      {
        value: 4,
        children: [
          {
            children: [
              {
                value: 2,
              },
            ],
          },
        ],
      },
      {
        value: 4,
        children: [
          {
            children: [
              {
                value: 2,
              },
            ],
          },
        ],
      },
      {
        value: 3,
        children: [
          {
            children: [
              {
                value: 1,
              },
            ],
          },
        ],
      },
    ],
    label: {
      color: "#FFFFFF",
      rotate: "radial",
      textBorderWidth: 2,
      formatter: function (param) {
        var depth = param.treePathInfo.length;
        if (depth === 2) {
          return "radial";
        } else if (depth === 3) {
          return "tangential";
        } else if (depth === 4) {
          return "0";
        }
        return "";
      },
    },
    levels: [
      {},
      {
        itemStyle: {
          color: "#CD4949",
        },
        label: {
          rotate: "radial",
        },
      },
      {
        itemStyle: {
          color: "#F47251",
        },
        label: {
          rotate: "radial",
        },
      },
      {
        itemStyle: {
          color: "#FFC75F",
        },
        label: {
          rotate: "radial",
        },
      },
    ],
  };

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: "维度",
      key: "xField",
      type: ["string", "date", "number"],
      limit: 1,
    },
    {
      label: "指标",
      key: "yField",
      type: ["number"],
      limit: 1,
    },
  ];

  // 样式配置描述信息
  _styleOptionConfig = [
    {
      label: "图表样式",
      bindKeys: "_group.echart",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "图表位置",
      bindKeys: "config.center",
      controlType: "slider-interval",
      controlValue: ["50%", "55%"],
      controlProps: {
        min: 0,
        max: 100,
        step: 5,
        range: true,
      },
      controlConfigs: {
        suffix: "%",
      },
    },
    {
      label: "图表大小",
      bindKeys: "config.radius",
      controlType: "slider-interval",
      controlValue: ["15%", "80%"],
      controlProps: {
        min: 0,
        max: 100,
        step: 5,
        range: true,
      },
      controlConfigs: {
        suffix: "%",
      },
    },
    {
      label: "字体样式",
      bindKeys: "_group.font",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "字体颜色",
      bindKeys: "config.font.color",
      controlType: "color-picker",
      controlValue: "#ffffff",
      controlProps: {},
      controlConfigs: {},
    },
    // {
    //   label: "图例配置",
    //   bindKeys: "_group.legend",
    //   controlType: "group",
    //   controlValue: "",
    //   controlProps: {},
    //   controlConfigs: {},
    // },
    // {
    //   label: "显示",
    //   bindKeys: "option.legend.show",
    //   controlType: "switch",
    //   controlValue: true,
    //   controlProps: {},
    //   controlConfigs: {},
    // },

    // {
    //   label: "数值",
    //   bindKeys: "config.value.show",
    //   controlType: "switch",
    //   controlValue: true,
    //   controlProps: {},
    //   controlConfigs: {},
    // },
    // {
    //   label: "百分比",
    //   bindKeys: "config.percent.show",
    //   controlType: "switch",
    //   controlValue: true,
    //   controlProps: {},
    //   controlConfigs: {},
    // },
    // ...tooltipConfig,
    // ...pieSeriesLabelConfig,
    // ...pieSeriesLabelLineConfig,
  ];

  getOption({
    dataField = [],
    dataList = [],
    dataTotal = 0,
    dataPoolField,
    styleOptionConfig = [],
    themeColor = [],
    themeStyle = {},
  }) {
    // 更新描述字段
    this._updateDataPoolField(dataField, dataPoolField);

    let data = [];

    const { xField, yField } = dataPoolField;

    // if (xField.length && yField.length) {
    //   data = dataList.reduce((r, c) => {
    //     r.push({
    //       name: c[xField[0].fieldName],
    //       value: c[yField[0].fieldName],
    //     });
    //     return r;
    //   }, []);
    // }

    let { option, series, config } =
      this._transformStyleOptionConfig(styleOptionConfig);

    let defaultOption = deepClone(this._defaultOption);
    let defaultSeries = deepClone(this._defaultSeries);

    // 再合并自定义配置项
    if (defaultOption && option)
      defaultOption = mergeObject(defaultOption, option);
    if (defaultSeries && series)
      defaultSeries = mergeObject(defaultSeries, series);

    defaultSeries.label.color = config.font.color;
    defaultSeries.radius = config.radius;
    defaultSeries.center = config.center;

    defaultOption.color = themeColor;

    if (
      this._info.component === "e-chart" &&
      defaultOption.series &&
      defaultOption.series instanceof Array
    ) {
      defaultOption.series.push({
        ...defaultSeries,
        // data: data,
      });
    }

    return defaultOption;
  }

  getClickData(event) {
    const { name, seriesName, value } = event;

    return {
      label: name,
      value: name,
    };
  }
}
